/**
* A simple list item to show a picture, name and cuteness value of a kitten, from the
* {@link Example.store.Kittens} store.
*/
Ext.define('Wiztop.custom.CheckboxItem', {
    extend: 'Ext.dataview.component.DataItem',
    xtype: 'checkboxtitem',
    requires: ['Ext.field.Checkbox'],
    config: {
        /**
        * A custom cls for each item
        */
        cls: 'kitten-list-item',

        /**
        * setup the dataMap. each property is a method in 'this' class, and then
        * inside that config, it will call the method you pass with the value you
        * want, form the record
        */
        dataMap: {
            getCheckbox: {
                setLabel: 'name'
            }
        },
        /**
        * @cfg {Boolean/Object/Ext.slider.Slider} slider
        * The slider component to show the cuteness of the kitten. We just want to
        * add some flex to make it look good.
        */
        checkbox: {
            flex: 1,
            labelWidth: '50%'
        },
        /**
        * We give it a hbox layout so the items are horizontally displayed, and then
        * give it an align of center so they are vertically centered.
        */
        layout: {
            type: 'hbox',
            align: 'center'
        }
    },

    /**
    * Called when you set the {@link #slider} configuration.
    *
    * Uses Ext.factory to return a proper instance using the configuration passed, the
    * default component, and the existing instance (if it exists).
    *
    * This should *never* be called manually. It will be called when you call {@link #setSlider}.
    * @private
    */
    applyCheckbox: function (config) {
        return Ext.factory(config, Ext.field.Checkbox, this.getCheckbox());
    },

    /**
    * Called when you set the {@link #slider} configuration, and is passed both the new value
    * (from applySlider) and the old value.
    *
    * This should *never* be called manually. It will be called when you call {@link #setSlider}.
    * @private
    */
    updateCheckbox: function (newCheckbox, oldCheckbox) {
        if (newCheckbox) {
            this.add(newCheckbox);
        }
        if (oldCheckbox) {
            this.remove(oldCheckbox);
        }
    }
});
